<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>papert: logo in your browser</title>
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/static/papert.css" />
<script type="text/javascript" src="/static/turtle.js"></script>
<script type="text/javascript" src="/static/parser.js"></script>
<script type="text/javascript" src="/static/logo.js"></script>
<script type="text/javascript">
var turtle = null;
var logo = null;
var canvas;
var form;
var sprite;
var textOutput;

function init (canvas_id,turtle_id,form_id,oldcode_id,textoutput_id) {
    canvas = document.getElementById(canvas_id);
    form = document.getElementById(form_id);
    textOutput = document.getElementById(textoutput_id);
    sprite = document.getElementById(turtle_id);
    
    // I hate opera, I hate firefox.
    canvas.style.width = 500;
    canvas.width = 500;
    
    canvas.style.height = 500;
    canvas.height = 500;
    
    oldcode = document.getElementById(oldcode_id);
    setup();
}

function setup () {
    logo = new Logo()
    
    fast = 5;
    turtle = new DelayTurtle(canvas,sprite,fast,false);
    logo.setTurtle(turtle);
	logo.setTextOutput(textOutput);
}


function run (speed,drawbits) {
        turtle.stop();
        if (speed != fast) {
            fast = speed;
            var newturtle = null;
/*          newturtle = new Turtle(canvas);
*/
            newturtle = new DelayTurtle(canvas,sprite,fast,drawbits);
            logo.setTurtle(newturtle);
            turtle = newturtle;
        }
        var code = form.code.value;
        oldcode.innerHTML +="\n"+code
        form.code.value = ""

        
        var out = logo.run(code);
                
        if (out && out.type == "error") {
            oldcode.innerHTML +="\nerror: "+out.data;
            logo.t = new Tokenizer();
        }

         oldcode.scrollTop = oldcode.scrollHeight;

         if (oldcode.createTextRange) {
             var range = oldcode.createTextRange();
             range.collapse(false);
             range.select();i
         }
}

function stop(){
    turtle.stop();
}

function clearcanvas() {
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "rgb(255,255,255)";
    ctx.fillRect(0, 0, 500, 500);
	textOutput.innerHTML = "";
}
function change(code) {
    if (code.match(/\n$/)) {
        tos = code.match(/\bto\b/gi);
        if (tos) { tos = tos.length } else {tos = 0}
        ends = code.match(/\bend\b/gi);
        if (ends) { ends = ends.length } else {ends = 0}
        if (tos == ends) { 

            tos = code.match(/\[/g);
            if (tos) { tos = tos.length } else {tos = 0}
            ends = code.match(/\]/g);
            if (ends) { ends = ends.length } else {ends = 0}

            if (tos == ends) { 
                tos = code.match(/\(/g);
                if (tos) { tos = tos.length } else {tos = 0}
                ends = code.match(/\)/g);
                if (ends) { ends = ends.length } else {ends = 0}
                
                if (tos == ends) { 

                    run(15,true);
                }
            }
        }
    } 
}
</script>

</head>
<body onload="init('canvas','turtle','input','oldcode', 'textOutput'); clearcanvas(); run(5,false);">
    
<div id="main">
<form id="input" action="/" method="post" onSubmit="this.img.value = canvas.toDataURL().replace('data:image/png;base64,','')">

<div id="content">
    <div class="inner">
        <div id="oldcode">&nbsp;</div>
        <div>
        <textarea onkeyup="return change(this.value);" name="code" id="code" rows="80" cols="20"></textarea>
        </div>
        <div style="margin: 5px;">
        <input type="button" onClick="run(25,true);" value="run slowly" />
        <input type="button" onClick="run(5,false);" value="run normally" style="font-weight: bold;"/>
        <input type="button" onClick="run(1,false);" value="run fast" />
        <input type="button" onClick="stop();" value="stop program" />
        <input type="hidden" name="img" />
        </div>

    </div>
</div>

<div id="left">

    <div class="inner">
		<div id="textOutput"></div>
     <div id="turtle">
         <embed width="20" height="20" id='sprite'  src="/static/turtle.svg"/>
         </div>
        <canvas id="canvas">
    Your browser doesn't support canvas tags. Please upgrade to a recent version of Firefox or Opera.
    </canvas>
    <span style="float: left; margin-right: auto;">
    <input type="submit" value="share this program" />
    <input type="button" onClick="document.location.href = canvas.toDataURL().replace('image/png', 'image/octet-stream')" value="save as png" />
    </span>
     <span style="float: right;margin-left: auto; margin-right: 20px;">
     <input type="button" onClick="clearcanvas();" value="clear" />
     </span>
</div>
        
</div>
</form>


</div>
</body>
</html>
